<template>
  <a-card style="height: 100%" :body-style="{ height: '100%' }">
    <div style="width: 100%">
      <a-button-group style="float: right; margin-bottom: 10px; height: 50px">
        <s-button
          @click="
            () => {
              $parent.openList()
            }
          "
          ><s-icon type="left-outlined" />返回</s-button
        >
        <s-button @click="autoImport"> <s-icon type="arrow-up-outlined" />模型导入 </s-button>
        <s-button type="primary" @click="save"> <s-icon type="save-outlined" />保存 </s-button>
      </a-button-group>
    </div>

    <dynamic-form-designer
      ref="design"
      :key-options="keyOptions"
      style="height: calc(100% - 100px); width: 100%"
      :code="false"
    />
  </a-card>
</template>

<script>
import { v4 } from 'uuid'
import DynamicFormDesigner from '@/components/extends/dynamicForm/designer/index.vue'
import { templates } from '@/components/extends/dynamicForm/designer/components/templateData.js'
import renderComponentAttrs from '@/components/extends/dynamicForm/designer/render.js'
export default {
  name: 'FormDesign',
  components: { DynamicFormDesigner },
  props: {
    dataId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      keyOptions: [],
      moduleValue: {}
    }
  },
  created() {
    this.$loading(true)
    this.$api
      .GET('/code/module/selectOneById', { id: this.dataId })
      .then((res) => {
        this.$loading(false)
        this.moduleValue = res.data.moduleValue
        if (res.data.moduleForm) {
          this.$refs.design.init({
            data: res.data.moduleForm.data,
            index: res.data.moduleForm.index,
            properties: res.data.moduleForm.properties
          })
        }
        if (res.data.moduleValue && res.data.moduleValue.model) {
          this.loadModel()
        }
      })
      .catch((e) => {
        this.$loading(false)
      })
  },
  methods: {
    loadModel() {
      this.keyOptions = []
      this.$api.GET('/code/model/selectOneById', { id: this.moduleValue.model }).then((res) => {
        let columns = res.data.modelColumn
        if (columns && columns.length > 0) {
          res.data.modelColumn.forEach((item) => {
            this.keyOptions.push({ label: item.key, value: item.name })
          })
        }
      })
    },
    autoImport() {
      if (this.moduleValue && this.moduleValue.model) {
        this.$loading(true)
        this.$api
          .GET('/code/model/selectOneById', { id: this.moduleValue.model })
          .then((res) => {
            this.$loading(false)
            let columns = res.data.modelColumn
            if (!columns || columns.length == 0) {
              this.$message.warn('模型未配置列，无法导入')
            } else {
              const items = []
              for (let i = 0; i < columns.length; i++) {
                const val = columns[i]
                if (!val.add && !val.update) {
                  continue
                }
                const item = JSON.parse(JSON.stringify(templates.input))
                item.id = v4()
                item.properties.label = val.name
                item.properties.key = val.key
                item.properties.placeholder = '请输入' + val.name
                item.properties.max = val.dbLength
                if (!val.allowNull) {
                  item.properties.required = '1'
                }
                if (val.add && !val.update) {
                  item.properties.ifCondition = 'formValue.id==null'
                }
                if (!val.add && val.update) {
                  item.properties.ifCondition = 'formValue.id!=null'
                }
                renderComponentAttrs(item)
                items.push(item)
              }
              this.$refs.design.init({
                data: items,
                index: 0
              })
            }
          })
          .catch((e) => {
            this.$loading(false)
            this.$message.warn('导入失败')
          })
      } else {
        this.$message.warn('模型未配置，无法导入')
      }
    },
    save() {
      this.$loading(true)
      this.$api
        .PUT('/code/module/updateForm', {
          id: this.dataId,
          form: this.$refs.design.getData()
        })
        .then((res) => {
          this.$loading(false)
          this.$message.info(res.msg)
        })
        .catch(() => {
          this.$loading(false)
        })
    }
  }
}
</script>

<style lang="less" scoped></style>
